<template>
    <div class="box">    
        <van-cell is-link @click="showPopup" class="v-cell">全部</van-cell>
        <van-popup class="pop" 
                    v-model="show"
                    position="bottom" 
                    :style="{ height: '60%' }"  
                >
            <h2>菜单分类</h2>
            <ul>
                <li v-for="(item,index) in list" :key="item.id" @click="onClick(index)">{{item.name}}</li>    
            </ul>    
        </van-popup>  
    </div>
</template>

<script>
import $ from "@/utils/request"
export default {
    name:"Popup",
    props:{
        list:Array,
        eatList: Array,
    },  
    data() {
        return {
            show: false, 
            str: "recipe/menulist/",
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        async onClick(index){
            this.$bus.$emit("getIndex",index)
            // console.log(index)
            const sot = await $.getAxios(this.str + this.eatList[index]);
            // console.log(sot)
            this.targetEatList = sot.data.data.big_recommend.list;
        }
    }
}
</script>

<style lang="scss" scoped>
.v-cell{
    font-size: .24rem;
}
.pop{
    padding: 1.5rem 1.5rem 0 1rem;
    h2{
        font-size: .48rem;
        margin-bottom: 1rem;
    }
    ul{
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 3.5rem;
            height: 1.5rem;
            border: 1px solid #ccc;
            line-height: 1.5rem;
            text-align: center;
            margin:0 .8rem .5rem 0;
            border-radius: 1.2rem;
            font-size: .32rem;
        }
    }
}

</style>